<template>
  <div>
    <Top />
		<section class="bg-green-600 flex-col flex items-center justify-center" style="height: 10vh;text-align: center;">
      <div class="container mx-auto px-4">
        <div class="row">
          <div class="col-md-12 text-center">
            <h2 class="text-4xl font-bold text-white">Expert Team</h2>
          </div>
        </div>
      </div>
    </section>
    <div class="bg-gray-50 py-16">
      <div class="max-w-7xl mx-auto px-4">
        <!-- 页面标题 -->
        <div class="text-center mb-12">
          <p class="text-xl text-gray-600">We bring together leading carbon neutrality experts from around the world.</p>
        </div>

        <!-- 专家卡片网格 -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
          <template v-for="(expert, index) in experts" :key="expert.id">
            <NuxtLink :to="`/member/detail?id=${expert.id}`" class="block">
              <div class="bg-white rounded-lg shadow-lg p-6 text-center hover:shadow-xl transition-all duration-300 cursor-pointer" style="transition: all 0.3s;" @mouseenter="hoverCard($event)" @mouseleave="leaveCard($event)">
                <div class="mb-4">
                  <img :src="expert.avatarUrl || `/images/${index + 1}_1649131169635.png`" :alt="expert.expertName" class="w-32 h-32 rounded-full mx-auto object-cover">
                </div>
                <h3 class="text-xl font-semibold text-gray-900 mb-2">{{ expert.expertName }}</h3>
                <p class="text-gray-600 mb-4 truncate">{{ expert.profile || 'Expert' }}</p>
                <span class="bg-gray-700 text-white px-6 py-2 rounded-md hover:bg-gray-800 transition-colors">
                  Learn More
                </span>
              </div>
            </NuxtLink>
          </template>
        </div>
      </div>
    </div>
    <Bottom />
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { expertApi } from '~/public/utils/api'

// 页面元数据
definePageMeta({
  layout: false
})

// 专家数据
const experts = ref([])

// 获取专家列表
const fetchExperts = async () => {
  try {
    const result = await expertApi.getList({
      pageSize: 999,
      pageNum: 1
    })
    if (result && result.rows) {
      experts.value = result.rows
    }
  } catch (error) {
    console.error('Failed to fetch experts:', error)
  }
}

// 悬浮卡片效果
const hoverCard = (event) => {
  const card = event.target
  const h3 = card.querySelector('h3')
  const p = card.querySelector('p')
  
  card.style.backgroundColor = '#2a649c'
  if (h3) h3.style.color = 'white'
  if (p) p.style.color = 'white'
}

const leaveCard = (event) => {
  const card = event.target
  const h3 = card.querySelector('h3')
  const p = card.querySelector('p')
  
  card.style.backgroundColor = 'white'
  if (h3) h3.style.color = '#1f2937'
  if (p) p.style.color = '#6b7280'
}

onMounted(async () => {
  await fetchExperts()
})

// 设置页面标题
useHead({
  title: 'Expert Team - Carbon Tariff Platform',
  meta: [
    { name: 'description', content: 'Meet our professional team of carbon tariff experts, researchers, and consultants dedicated to sustainable solutions' },
    { name: 'keywords', content: 'carbon experts, professional team, CBAM consultants, sustainability specialists' }
  ]
})
</script>